<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			*{
			    margin: 0;
			    padding: 0;
			}
			
			html,body{
			    width: 100%;
			    height: 3000px;
			}
			
			#panel{
			    width: 100%;
			    height: 100%;
			    background-color: #000;
			    opacity: 0.4;
			    filter: alpha(opacity: 40);
			
			    position: absolute;
			    left:0;
			    top:0;
			
			    display: none;
			}
			
			#login{
			    width: 300px;
			    height: 300px;
			    background-color: skyblue;
			    border-radius: 5px;
			
			    position: fixed;
			    left: 50%;
			    top:50%;
			    margin-left: -150px;
			    margin-top: -150px;
			
			    display: none;
				z-index: 999;
			}
			
			/**{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			#login{
				width: 150px;
				height: 150px;
				background-color: aqua;
				display: none;
				position: fixed;
				left: 50%;
				top:50%;
				margin-left: -150px;
				margin-top: -150px;
			}
			#panel{
				width: 100%;
				height: 100%;
				background-color: dimgray;
				opacity: 0.3;
				filter: alpha(opacity: 30);
				position: absolute;
				left: 0;
				top: 0;
				display: none;
			}*/
			
		</style>
	</head>
	<body>
		<button type="button"  id="btn">准备登录</button>
		<div id="log">
			<div id="login"></div>
			<div id="panel"></div>
		</div>
		<script src="通用兼容文件.js"></script>
		<script>
			window.onload = function(){
			
			//监听按钮
			$('btn').onclick = function(event){
				//阻止冒泡
				if(event && event.stopPropagation){
				    event.stopPropagation();
				}else {
				    window.event.cancelBubble = true;
				}
				
			$('login').style.display = "block";
			$('panel').style.display = "block";
			//让页面固定，需要隐藏滚动条
				document.body.style.overflow = 'hidden';				
			};
			
			//当点击其他部分的时候，蒙版消失
			document.onclick = function(event){
				var event = event || window.event;
				 var targetid = event.target ? event.target.id : event.srcElement.id;
				 console.log(targetid);
				 if(targetid !=="login"){
					 $("panel").style.display = 'none';
					  $("login").style.display = 'none';
					document.body.style.overflow = "auto"; 		 
				 }
				 else {
				      window.location.href = "http://www.baidu.com";
				 }
			}				
		}
		</script>
	</body>
</html>
